<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue'
import {getTimer} from '@/utils/index'
import { useUsererStore } from '@/stores/user';
import {EDIT, VIEW} from '@/views/config'
import { useRouter } from 'vue-router';

const userStore = useUsererStore()

const emit = defineEmits(['pageChange'])
const props = defineProps<{
    isPagination?: boolean
    titleConList: Array<any>
    title: string
    total?: number
    loginCheck?: boolean
}>()

const currChange = (current: number) => {
    emit('pageChange', current)
}
const router = useRouter()
const gotoDetail = (item: any) => {
    // 点击社区博客 
    router.push(`/newblog?type=${VIEW}&id=${item?.id}`)
}
</script>

<template>
    <!-- <div v-if="loginCheck" v-loading="true" class=" pt-64"></div> -->
    <div v-bind="$attrs" class=" overflow-hidden">
        <div v-if="loginCheck" class="text-base px-6 py-5 text-gray-800">
            {{props.title}} 
            <span v-if="!userStore.userInfo?.realname" class="text-xs ml-4 text-neutral-400">暂未登录?</span></div>
        <div v-else class="text-base px-6 py-5 border-b text-gray-800">{{props.title}}</div>
        <div v-for="item in titleConList" :key="item.id" class="border-b p-5 flex hover:bg-gray-50">
            <img class="mr-3 rounded-md cursor-pointer flex-shrink-0 w-12" src="https://www.houdunren.com/images/boy.png" alt="">
            <div class="h-full">
                <p @click="gotoDetail(item)" class="font-thin pb-1 text-xl cursor-pointer">{{item.title}}</p>
                <!-- <span class="bg-cyan-400 p-1 max-w-max text-xs rounded-lg text-white">签到</span> -->
                <span class="bg-orange-400 p-1 max-w-max text-xs rounded-lg text-white">帖子</span>
                <span class=" ml-1 text-xs text-neutral-600">{{item.realname}}</span>
                <span class=" ml-1 text-xs text-neutral-400">{{getTimer(item.createdAt)}}</span>
            </div>
        </div>
        <div class="p-5 flex justify-center" v-if="props.isPagination">
            <el-pagination @currentChange="currChange" background layout="prev, pager, next" :total="total" class="mt-4" />
        </div>
    </div>
</template>